<script>
import api from '../assets/js/settings'

export default {
  name: "Banner",
  data() {
    return {
      bannerList: []
    }
  },
  created() {
    this.$axios.get(api.banner).then(res => {
      console.log(res.data)
      if (res.data.code === 100) {
        this.bannerList = res.data.results
      } else {
        // ajax正常返回的错误
        this.$message({type: "error", message: res.data.msg})
      }
    }).catch(err => {
      // 系统粗错误抛出异常
      this.$message({type: "error", message: '服务器异常，请联系系统管理员'})
    })
  }
}
</script>

<template>
  <div class="banner">
    <el-carousel height="400px">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <!-- 跳内部，跳外链接-->
        <div v-if="item.link.indexOf('http')>=0">
          <a :href="item.link">
            <img :src="item.image" :alt="item.title">
          </a>
        </div>
        <div v-else>
          <router-link :to="item.link">
            <img :src="item.image" :alt="item.title">
          </router-link>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}
</style>